<template>
  <div class="absorbMaterial">
    <div class="operate-icon" :class="status ? 'active' : ''" @click="straw">
      <SvgIcon icon-class="吸管" />
    </div>
    <span>请选择物体吸取材质对象</span>
  </div>
  <ProPanel :groups="groups" :data="stageStore.layerData"> </ProPanel>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import ProPanel from '@/components/pro-panel/index.vue';
import { useStageStore } from '@/store/stage';
import { useEditorStore } from '@/store/editor';
import { IMaterial } from './interface';
import { getResPath } from '@/utils/cimup';

const stageStore = useStageStore();
const editStore = useEditorStore();
const { cimInstance } = window;
const { layerId } = stageStore;
const groups = ref();
const status = ref(false);
const columnsMap: any = {
  imageMap: {
    label: '贴图',
    prop: 'textureUrl',
    type: 'image-selector',
    formProps: {
      title: '替换贴图',
      buttonText: '替换贴图',
      showClose: true,
      tabs: [
        { label: '系统贴图', value: 'private' },
        { label: '我的上传', value: 'public' },
      ],
    },
  },
  metallic: {
    label: '金属度',
    type: 'slider',
    prop: 'metallic',
    formProps: { showInput: true, showInputControls: false, min: 0, max: 1, step: 0.01 },
  },
  roughness: {
    label: '粗糙度',
    type: 'slider',
    prop: 'roughness',
    formProps: { showInput: true, showInputControls: false, min: 0, max: 1, step: 0.01 },
  },
  reflexMap: {
    label: '',
    prop: 'reflexMap',
    type: 'image-selector1',
  },
};
onMounted(() => {
  cimInstance.api.addLayerEventListener(layerId, 'mouse_mousemove', changeMouseClass);
  cimInstance.eventApi.addEventListener('choose_gltf', getGltfModelMaterial);
  getMaterialList();
});
const getMaterialList = () => {
  // 获取模型的 所有材质贴图数组
  const result: IMaterial[] = cimInstance.api.getMaterialListByLayer(layerId);
  stageStore.layerData.material = result?.map((x: any) => {
    return { ...x, textureUrl: x.textureUrl || getResPath('comm/images/ndpzpynl.rhx.png') };
  });
  formatGltfMaterial();
};

const formatGltfMaterial = () => {
  const list = stageStore.layerData?.material;
  // 组装pro-panle jsonScema
  groups.value = list?.map((item: IMaterial, i: number) => {
    const keys = Object.keys(item).filter((c) => c !== 'name'); // 排除name
    return {
      title: item?.name,
      key: `material${i}`,
      collapsed: false,
      columns: [
        {
          ...columnsMap.imageMap,
          prop: `material.${i}.textureUrl`,
        },
        ...keys?.map((x) => {
          return {
            ...columnsMap[x],
            prop: `material.${i}.${x}`,
          };
        }),
      ],
    };
  });
};
const straw = () => {
  if (status.value) {
    closeMouseIcon();
    return;
  }
  editStore.mouseClass = 'select';
  status.value = true;
  // 添加gltf图层鼠标移入事件监听
};
// 结束鼠标吸取状态
const closeMouseIcon = () => {
  status.value = false;
  editStore.mouseClass = '';
};
// 获取材质
const getGltfModelMaterial = (e: any) => {
  if (status.value) {
    const result: IMaterial[] = cimInstance.api.getGltfModelPbrMaterial(e) || [];
    stageStore.layerData.material = result?.map((x: any) => {
      return { ...x, textureUrl: x.textureUrl || getResPath('comm/images/ndpzpynl.rhx.png') };
    });
    formatGltfMaterial();
  }
};
const changeMouseClass = (e: any) => {
  const selectId = e.clickObject?.id;
  // 改变鼠标样式
  if (status.value) {
    if (selectId) {
      editStore.mouseClass = 'selectable';
    } else {
      editStore.mouseClass = 'unselectable';
    }
  }
};
onUnmounted(() => {
  closeMouseIcon();
  cimInstance.api.removeLayerEventListener(layerId, 'mouse_mousemove');
  cimInstance.eventApi.removeEventListener('choose_gltf');
});
</script>

<style lang="less" scoped>
:deep(.el-slider__input) {
  width: 100px !important;
}
.absorbMaterial {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .operate-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    margin-right: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;

    &.active {
      border-color: #0560fd;
    }
  }

  span {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #9a9a9a;
  }
}
</style>
